<template>
    <view class="page">
        <u-navbar title="搜索" :autoBack="true" :placeholder="true">
        </u-navbar>
        <view class="searchBox">
            <u-input class="input" confirmType="search" clearable :focus="isFocus" prefixIcon="search"
                :placeholder="placeholderText" @confirm="searchBook"></u-input>
            <u-button class="button" @click="back">取消</u-button>
        </view>
        <view class="hotList">
            <view class="listTitle">
                <span class="title">多多热搜</span>
                <view class="rightText" @click="goHotList">
                    <span>完整榜单</span>
                    <u-icon name="arrow-right-double"></u-icon>
                </view>

            </view>
            <view class="list">
                <view class="listItem" v-for="item in hotBookListBySearch" :key="item.id">
                    <view class="itemText" @click="goBookDetails(item)">{{ item.bookTitle }}</view>
                    <view class="searchNum">{{ item.view }}</view>
                    <i v-show="item.top <= 3" class="iconfont icon-remen"
                        :class="{ top1: item.top == 1, top2: item.top == 2, top3: item.top == 3 }"></i>
                </view>
            </view>
        </view>
        <view class="searchHistoryList">
            <view class="listTitle">
                <span class="title">历史搜索</span>
                <view class="rightText" @click="handleShowHidden">{{ showHidden }}</view>
            </view>
            <view class="list" v-show="showHidden == '隐藏'">
                <view class="listItem" v-for="item, index in historyList" :key="item.id">
                    <view @longpress="choose(item.id)">
                        <u-tag class="tag" :class="{ chooseTag: curIndex != item.id }" :text="item.name" bgColor="#ccc"
                            borderColor="#ccc" size="mini" @click="searchBook(item.name)" @close="deleteTag(index)"
                            :closable="curIndex == item.id">
                        </u-tag>
                    </view>
                </view>
            </view>
            <view class="cleanHistory" v-if="historyList.length != 0">
                <u-button class="button" icon="trash" iconColor="black" type="danger" @click="cleanHistory">清空历史记录
                </u-button>
            </view>
            <view class="empty" v-else>
                <view class="emptyText">暂无搜索记录</view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    onLoad() {
        this.isFocus = true;
        this.historyList = this.$tools.getHistory() || []
    },
    computed: {
        ...mapGetters(['hotBookListBySearch'])
    },
    data() {
        return {
            isFocus: false,
            showHidden: '隐藏',
            curIndex: -1,
            placeholderText: 'search for book',
            historyList: []
        }
    },
    methods: {

        goBookDetails(book) {
            console.log(book)
            this.$store.dispatch('getBookDetail', book.id).then(res => {
                if(res == 'success')
                this.$Router.push({
                    name: 'detail'
                })
            })

        },
        searchBook(searchText) {
            if (!searchText)
                return;
            let len = this.historyList.length
            if (len > 0) {
                this.historyList.unshift({
                    id: this.historyList[0].id + 1,
                    name: searchText
                })
            }
            else {
                this.historyList.unshift({
                    id: 1,
                    name: searchText
                })
            }
            len = this.historyList.length
            // 数组去重，保留第一个，移除后面相同的name
            for (let i = 0; i < len; i++) {
                let item = this.historyList[i]
                for (let j = i + 1; j < len; j++) {
                    if (this.historyList[j].name == item.name) {
                        this.historyList.splice(j, 1)
                        len--;
                    }
                }
            }
            this.$tools.setHistory(this.historyList)
            this.$store.dispatch('searchNewList', searchText)
            this.$Router.push({
                name: 'searchResult',
                params: {
                    keyword: searchText
                },
            })
        },
        back() {
            this.$Router.back()
        },
        choose(index) {
            this.curIndex = index;
        },
        deleteTag(index) {
            this.curIndex = -1;
            this.historyList.splice(index, 1);
            this.$tools.setHistory(this.historyList)

        },
        cleanHistory() {
            // 弹出提示框
            uni.showModal({
                title: '提示',
                content: '确定要清空历史记录吗？',
                success: res => {
                    if (res.confirm) {
                        this.historyList = [];
                        this.$tools.cleanHistory();
                    }
                }
            })
        },
        handleShowHidden() {
            this.showHidden = this.showHidden == '隐藏' ? '显示' : '隐藏';
        },
        goHotList() {
            this.$Router.push({
                name: 'hotList',
            })
        }
    }
}
</script>

<style lang="scss">
page {
    width: 100%;
    height: 100%;

    .page {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .searchBox {
            margin-top: 1rem;
            height: 3rem;
            width: 95%;
            display: flex;
            flex-direction: row;

            .input {
                width: 90%;
                height: 60%;
                border-radius: 2rem;
                padding: 0.5rem;
                box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
            }

            .button {
                width: 13%;
                height: 90%;
                border-radius: 0.5rem;
                border: none;
                padding: 0.5rem;
                background-color: transparent;
                border: 0;
            }
        }

        .hotList {
            width: 90%;

            .list {
                width: 100%;

                .listItem {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    font-size: 0.9rem;
                    line-height: 1.2rem;
                    border-bottom: 1px solid #e5e5e5;
                    padding: 0.2rem;
                    padding: 0.5rem 0;

                    .searchNum {
                        color: #999;
                        padding-left: 0.5rem;
                        padding-top: 0.2rem;
                        font-size: 0.2rem;
                    }

                    .itemText {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .top1 {
                        color: #ff4d4f;
                    }

                    .top2 {
                        color: #ff9f43;
                    }

                    .top3 {
                        color: #ffeb3b;
                    }

                    .icon-remen {
                        padding-left: 0.5rem;
                    }
                }
            }

            .listTitle {
                width: 100%;
                height: 3rem;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;

                .title {
                    font-size: 1.2rem;
                }

                .rightText {
                    display: flex;
                    flex-direction: row;
                }
            }
        }

        .searchHistoryList {
            margin-top: 2rem;
            width: 90%;

            .listTitle {
                width: 100%;
                height: 3rem;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;

                .title {
                    font-size: 1.2rem;
                }

                .rightText {
                    display: flex;
                    flex-direction: row;
                }
            }

            .list {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                text-align: center;

                .listItem {
                    .tag {
                        height: 2.13rem;
                        padding-right: 0.5rem;
                    }

                    .chooseTag {
                        padding-top: 0.6rem;
                    }
                }
            }
        }

        .empty {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .emptyText {
                font-size: 1.2rem;
                color: #999;
            }
        }
    }
}
</style>